<template>
  <el-card>
    <div class="box">
        <div class="box-row-1">
            <el-form :model="ruleform" ref="ruleForm">
                <div class="box-form">
                    <el-form-item label="部门名称" class="displayClass">
                        <el-input v-model="ruleform.dept_name" placeholder="请输入部门名称"></el-input>
                    </el-form-item>

                    <el-form-item label="启用状态" class="displayClass">
                        <el-select v-model="ruleform.State" placeholder="请选择" clearable>
                            <el-option v-for="item in options" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="el-button--mini" type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
                        <el-button class="el-button--mini" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <div class="box-row-2">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-button size="small" type="primary" icon="el-icon-plus" plain @click="add">新增</el-button>
                        <el-button size="small" type="info" icon="el-icon-sort" @click="handTrigger">展开/折叠</el-button>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-button icon="el-icon-search"  size="small" circle></el-button>
                        <el-button icon="el-icon-refresh" size="small" circle></el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="box-row-3">
            <el-table 
            :data="tableData"
            v-if="refreshTable"
            height="calc(100vh - 280px)" 
            v-loading="isloading"
            style="width: 100%;margin-bottom: 20px;"
            :default-expand-all="isExpand"
            row-key="dept_id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="dept_name"
                    label="部门名称" width="200">
                </el-table-column>
                <el-table-column
                    prop="order_num"
                    label="排序" width="200">
                </el-table-column>
                <el-table-column prop="status" label="是否启用" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.status == 0">正常</div>
                                <div v-else>停用</div>
                            </el-tag>
                        </template>
                </el-table-column>
            
                <el-table-column prop="create_time" label="创建时间" width="250" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                        <el-button @click="add(scope.row)" type="text" size="small" icon="el-icon-plus">新增</el-button>
                        <el-button @click="handleDel(scope.row)" type="text" size="small" v-if="scope.row.parent_id!=null" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog width="450px" class="box-dialog" :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
          <DepartmentDialog :model="model"  ref="s1" @Closedialog="closeDialog" v-if="dialogFormVisible" @dataBind="dataBind" :isUpdate="isUpdate" :isShow="InputIsShow"></DepartmentDialog>
    </el-dialog>
  </el-card>
</template>

<script>
import DepartmentDialog from '../Organizational/components/DepartmentDialog.vue'
export default {
    components:{
        DepartmentDialog
    },
    data(){
        return{
            options:[{
                    value: '0',
                    label: '正常'
                },{
                    value:'1',
                    label:'停用'
                }
            ],
            ruleform:{
                dept_name:'',
                State:''
            },
            tableData: [],
            optionTree:[],
            title:'新增部门',
            isUpdate:false,
            InputIsShow:false,
            model:{
                Dname:'',
                parent_id:'',
                dept_name:'',
                order_num:'',
                leader:'',
                phone:'',
                email:'',
                status:'',
            },
            isloading:false,
            dialogFormVisible:false, //是否显示弹窗
            refreshTable:true,//表格显示状态
            isExpand:true,//是否展开子节点
        }
    },
    //计算属性
    computed:{
    },
    methods:{
        getCheckedNodes(e){
            console.log(e);
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    console.log('err')
                }
            })
        },
        handTrigger(){
            this.refreshTable =false;
            this.isExpand = !this.isExpand
            this.$nextTick(()=>{
                this.refreshTable =true;
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields()
        },
        add(e){
            this.InputIsShow=true,
            this.title='新增部门'
            this.model.parent_id=e.dept_id,
            this.model.Dname=e.dept_name,
            this.isUpdate=false,
            this.dialogFormVisible=true
        },
        handleDel(e){
            let Id =e.dept_id
            if(Id != undefined){
                this.$confirm('此操作将永久删除数据, 是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                })
                .then(()=>{
                    const loading = this.$loading();
                    this.$http.delete('/api/DepartmentManage',{params:{Id:Id}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }
                            else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err =>{
                            this.ShowMsg('服务器异常，请稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).catch(()=>{})
            }
        },
        handleEdit(e){
            this.title='修改部门'
            this.model=JSON.parse(JSON.stringify(e))
            if(e.parent_id==null || e.parent_id=='')
            {
                this.InputIsShow=false
                this.model.status=e.status
            }
            else{
                let arr=this.cvtData();
                let l= arr.filter(x=>x.dept_id==e.parent_id)
                this.InputIsShow=true,
                this.model.Dname=l[0].dept_name
                this.model.parent_id=l[0].dept_id
                this.model.status=e.status
            }
           
            this.isUpdate=true,
            this.dialogFormVisible=true
        },
        dataBind(){
            this.isloading=true
            this.$http.request({
                type:'get',
                url:'/api/DepartmentManage',
                params:{
                    DName:this.ruleform.dept_name,
                    Status:this.ruleform.State
                }
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.tableData=res.data.data;
                    // let datas = res.data.data;
                    // this.optionTree= this.cvtTreeData(datas);
                }
            }).catch(err=>{
                this.ShowMsg('服务器异常','error');
                console.log(err)
            }).finally(()=>{
                this.isloading=false;
            })
        },
        closeDialog(){
            this.dialogFormVisible=false;
            this.model={
                Dname:'',
                parent_id:'',
                dept_name:'',
                order_num:'',
                leader:'',
                phone:'',
                email:'',
                status:'',
            }   
            if(this.$refs.s1)
            {
                this.$refs.s1.reset();
                this.$refs.s1.$refs.dataForm.resetFields();
            }
        },
        //递归
        cvtTreeData(datas){
            const getData =  (item)=>{
                let arr  = [];
                if(item.length>0){
                    item.forEach(x=>{
                        let obj = new Object();
                        this.$set(obj,'label',x.dept_name);
                        this.$set(obj,'value',x.dept_id);
                        if(x.children.length>0){
                            let childArray = getData(x.children)
                            this.$set(obj,'children',childArray);
                        }

                        arr.push(obj);
                    })
                }

                return arr;
            }

            return getData(datas);
        },

        cvtData(){
            let arr = [];
            const getData=datas=>{
                if(datas.length>0){
                    datas.forEach(x=>{
                        arr.push({dept_id:x.dept_id,dept_name:x.dept_name,status:x.status});
                        if(x.children){
                            getData(x.children);
                        }
                    });
                }
                return arr;
            }
           
            return getData(this.tableData);
        }
    },
    created(){
        this.dataBind();
    }
}
</script>

<style>
.d{
    display: none;
}
.box-form{
    display: flex;
    align-items: center;
}
.displayClass{
    display: flex;
    margin-right:15px;
}
.displayClass input{
    width:235px;
    height:35px;
}
.el-button--mini{
    padding:10px 20px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3{
    margin-top:10px;
}
.box-Input-mini input,.box-Input-mini textarea{
    width:100%;
}
.box-Input-mini textarea{
    height:60px;
}
.el-button--mini{
    padding:10px 20px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3,.box-row-3-pagination{
    margin-top:10px;
}
/* .el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
} */
</style>